<template>
  <view class="con" style="min-height: 100vh">
    <view class="con1">
      <view class="tit">相册工具箱</view>
      <view class="wjxBox">
        <image class="wjx" @click="goPage('/pages/home/compressPage?type=1')" src="../../static/home/tpys.png" mode="aspectFill" />
        <image class="wjx" @click="goPage('/pages/home/compressPage?type=2')" src="../../static/home/spys.png" mode="aspectFill" />
        <image class="wjx" @click="goPage('/pages/home/compressPage?type=3')" src="../../static/home/wzsp.png" mode="aspectFill" />
        <image class="wjx" @click="goPage('/pages/home/compressPage?type=4')" src="../../static/home/xpmb.png" mode="aspectFill" />
      </view>
      <view class="tit">AI工坊</view>
      <view class="wjxBox">
        <image class="wjx" @click="goPage('/pages/home/compressPage?type=5')" src="../../static/home/aiznkt.png" mode="aspectFill" />
        <image class="wjx" @click="goPage('/pages/home/compressPage?type=6')" src="../../static/home/aimhf.png" mode="aspectFill" />
        <image class="wjx" @click="goPage('/pages/home/compressPage?type=7')" src="../../static/home/znkttx.png" mode="aspectFill" />
        <image class="wjx" @click="goPage('/pages/home/compressPage?type=8')" src="../../static/home/yjmh.png" mode="aspectFill" />
      </view>
    </view>
    <view class="main">
      <image src="../../static/home/htfx.png" class="tImg" mode="aspectFill" />
      <u-tabs
        :list="tabList"
        @click="tabClick"
        :activeStyle="{
          color: '#000000',
          fontWeight: 'bold',
        }"
        lineWidth="26"
        lineHeight="5"
        lineColor="#fff"
      ></u-tabs>
      <template v-if="list.length > 0">
        <view class="imageBox">
          <view class="imgB" v-for="(item, index) in list" :key="index">
            <image
              class="IMG"
              :src="item.picture"
              @click="
                TanPreviewImage(
                  list.map((i) => i.picture),
                  index
                )
              "
              mode="aspectFill"
            />
            <view class="zan">
              <image @click="likeFn(item)" v-if="item.likeFlag === '1'" class="heart" src="../../static/home/red_heart.png" mode="aspectFill" />
              <image @click="likeFn(item)" v-else class="heart" src="../../static/home/heat.png" mode="aspectFill" />
              <text>{{ item.likeCount }}</text>
            </view>
          </view>
        </view>
      </template>
      <view v-else style="width: 100%; display: flex; justify-content: center">
        <u-empty mode="list"></u-empty>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { getCategoryList, getPictureList, pictureLike } from "@/api/home";
import { goPage, loginFn, TanPreviewImage } from "@/utils/commonFn";
import { onMounted, ref } from "vue";
//@ts-ignore
import { onReachBottom } from "@dcloudio/uni-app";
const tabActive = ref("");
onMounted(async () => {
  await loginFn();
  const res = await getCategoryList();
  tabList.value = res.data;
  tabActive.value = res.data[0].id;
  getList();
});

const tabList = ref();
const pageStatus = ref("loadmore");
const page = ref(1);
const list = ref<any[]>([]);
const getList = async () => {
  if (pageStatus.value == "nomore") {
    return;
  }
  pageStatus.value = "loadmore";
  const res: any = await getPictureList({
    categoryId: tabActive.value,
    pageNum: page.value,
  });
  list.value = list.value.concat(res.rows);
  if (list.value.length >= (res.total as number)) {
    pageStatus.value = "nomore";
  } else {
    pageStatus.value = "loadmore";
  }
};
onReachBottom(() => {
  page.value++;
  getList();
});
const reset = () => {
  pageStatus.value = "loadmore";
  list.value = [];
  page.value = 1;
  getList();
};
const tabClick = (e: any) => {
  tabActive.value = e.id;
  reset();
};
const likeFn = async (item: any) => {
  await pictureLike({ id: item.id });
  if (item.likeFlag === "1") {
    item.likeFlag = "0";
    --item.likeCount;
  } else {
    item.likeFlag = "1";
    ++item.likeCount;
  }
};
const goFn = () => {
  uni.showToast({
    title: "暂未开放",
    icon: "none",
  });
};
</script>
<style lang="less" scoped>
.con1 {
  padding-left: 30rpx;
  padding-right: 30rpx;
}
.con {
  background: linear-gradient(145deg, #ccd9fb 0%, #ffffff 80%);
  padding-bottom: 0rpx;
  .tit {
    font-size: 36rpx;
    color: #333333;
  }
  .wjxBox {
    margin-top: 40rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .wjx {
      width: 330rpx;
      height: 222rpx;
      margin-bottom: 24rpx;
    }
  }
}
.tImg {
  width: 238rpx;
  height: 122rpx;
}
.imageBox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .imgB {
    width: 49%;
    height: 540rpx;
    background: #b4d2dd;
    margin-bottom: 16rpx;
    position: relative;
    .IMG {
      width: 100%;
      height: 100%;
    }
    .zan {
      position: absolute;
      right: 16rpx;
      top: 16rpx;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #ffffff;
      .heart {
        width: 36rpx;
        height: 36rpx;
        margin-right: 6rpx;
      }
    }
  }
}
</style>
